<template>
  <div class="App">
    根组件-<strong>{{ $store.state.title }}</strong>
    <input type="text" v-model="titles">
    <button @click="changeTitle">修改标题</button>
    直接通过mapstate获取： {{ title }}- {{ count }}
    <hr>
    <SonOne></SonOne>
    <hr>
    <SonTwo></SonTwo>
    <hr>
    <SonThree></SonThree>
    <hr>
    <SonFour></SonFour>
</div>
</template>

<script>
import SonOne from './components/SonOne.vue'
import SonThree from './components/SonThree.vue'
import SonTwo from './components/SonTwo.vue'
import SonFour from './components/SonFour.vue'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      titles: ''
    }
  },
  components: {
    SonOne,
    SonTwo,
    SonThree,
    SonFour
  },
  computed: {
    ...mapState(['count', 'title'])
  },
  methods: {
    changeTitle () {
      this.$store.commit('changeTitle', { titles: this.titles, msg: '修改标题咯' })
    }
  },
  created () {
    console.log(this.$store)
  }
}
</script>

<style>

</style>
